import React, { useMemo } from "react";
import Link from "next/link";
import TextAtom from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Text.Atom/enum";
import { useTranslation } from "react-i18next";
import AdminLayout from "@/user.InterfaceLayer/Libraries/Layouts/Admin.layout";

interface AdminItem {
  title: string;
  subtitle: string;
  link: string;
}

export default function AdminDashboard() {
  const { t } = useTranslation();

  // Кэшируем массив adminItems с помощью useMemo
  const adminItems = useMemo(() => {
    return t("AdminPage.table", { returnObjects: true }) as AdminItem[];
  }, [t]);

  let isLoading = false;
  let error = false;
  let summary = {
    ordersPrice: 0,
    ordersCount: 1,
    productsCount: 1,
    usersCount: 1,
  };

  return (
    <AdminLayout
      title={t("AdminPage.title.dashboard")}
      isLoading={isLoading}
      error={error}
      block={
        <div className="grid grid-cols-1 md:grid-cols-4">
          {adminItems.map((e, index) => (
            <div className="flex flex-col gap-3 mt-5" key={index}>
              <TextAtom type={TextAtomEnum.enum_h3} className="">
                ${summary.ordersPrice}
              </TextAtom>
              <TextAtom type={TextAtomEnum.enum_h4} className="font-bold">
                {e.title}
              </TextAtom>
              <Link href={e.link}>
                <TextAtom type={TextAtomEnum.enum_h4}>{e.subtitle}</TextAtom>
              </Link>
            </div>
          ))}
          <TextAtom type={TextAtomEnum.enum_h3} className="mt-10">
            Sales Report
          </TextAtom>
        </div>
      }
    />
  );
}
